<template>
	<view v-if="isPc" class="pc-view" style="">
		<PCLogin></PCLogin>
		<view class="pc-view-content">
			<image src="@/static/pc/login-bg.png" class="login-bg" mode="aspectFill"></image>
			<Footer></Footer>
		</view>
	</view>
	<view v-else>
		<NavBar background="#F1F4F3">
			<navigator open-type="navigateBack" hover-class="none" class="nav-back-view" slot="left">
				<image src="/static/nav-back-icon-ba.png" class="nav-back-icon"></image>
			</navigator>
			<navigator url="/pages/register/register" hover-class="none" class="nav-right-view" slot="right">
				注册账号
			</navigator>
		</NavBar>
		<view class="login-logo">
			<image src="/static/login-logo.png" class="logo-image"></image>
		</view>
		<view class="form-view">
			<view class="form-item">
				<view class="form-label required">手机号</view>
				<view class="form-content">
					<input type="number" v-model="formData.phoneNumber" placeholder="请输入手机号" class="input-css"
						placeholder-class="plac-css" maxlength="11" />
				</view>
			</view>
			<view v-if="loginSwitch" class="form-item">
				<view class="form-label required">验证码</view>
				<view class="form-content">
					<input type="number" v-model="formData.phoneCode" placeholder="请输入验证码" class="input-css"
						placeholder-class="plac-css" maxlength="6" />
					<view class="code-button" @click="getCode">{{codeTime != 60 ? codeTime + 's后重新获取' : '获取验证码'}}</view>
				</view>
			</view>
			<view v-else class="form-item">
				<view class="form-label required">
					<view class="label-text">
						<view>密</view>
						<view>码</view>
					</view>
				</view>
				<view class="form-content">
					<input v-model="formData.password" password placeholder="请输入登录密码" class="input-css"
						placeholder-class="plac-css" />
				</view>
			</view>
		</view>
		<block v-if="loginSwitch">
			<view class="row-end">
				<view class="desc-text" @click="isDialog = true">没有收到验证码？</view>
			</view>
			<view class="form-view">
				<view class="form-item">
					<view class="form-label">顾问工号</view>
					<view class="form-content">
						<input v-model="formData.advisoryNumber" placeholder="请输入顾问工号（选填）" class="input-css"
							placeholder-class="plac-css" />
					</view>
				</view>
			</view>
		</block>
		<view class="button-view" @click="loginSwitch ? onSubmitCodeLogin(): onSubmitPasswordLogin()">
			<view>登录</view>
			<view class="button-desc">云诺端</view>
		</view>
		<view class="column">
			<view class="button-switch" @click="loginSwitch = !loginSwitch">{{loginSwitch ? '账号密码登录' : '验证码登录'}}</view>
			<navigator open-type="switchTab" url="/pages/index/index" class="nav-back">暂不登录</navigator>
		</view>
		<view class="agreement-view">
			<view class="agreement-content" @click="agreement = !agreement">
				<view class="row">
					<image v-if="agreement" src="/static/select-icon-sel.png" class="select-icon"></image>
					<image v-else src="/static/select-icon.png" class="select-icon"></image>
				</view>
				<view>我已同意平台的</view>
				<view class="agreement-text">《用户协议》</view>
				<view>和</view>
				<view class="agreement-text">《隐私政策》</view>
			</view>
		</view>
		<CodeTextDialog v-if="isDialog" @close="isDialog = false"></CodeTextDialog>
	</view>
</template>

<script>
	import PCLogin from './components/PCLogin.vue'
	export default {
		components: {
			PCLogin
		},
		data() {
			return {
				isDialog: false,
				agreement: false,
				loginSwitch: false,
				codeTime: 60,
				timer: null,
				formData: {
					phoneNumber: '',
					phoneCode: '',
					password: '',
					advisoryNumber: ''
				}
			};
		},
		onLoad(options) {
			const system = uni.getSystemInfoSync()
			// #ifdef APP-PLUS
			// uni.$util.getPushClientId().then(res => {
			// 	console.log(res);
			// })
			// #endif

		},
		methods: {
			/**
			 * 验证码登录
			 */
			async onSubmitCodeLogin() {
				const showToast = uni.$util.showToast
				const regex = uni.$util.regex
				if (!this.agreement) return uni.$util.showToast('请阅读并同意用户协议和隐私政策')
				if (!this.formData.phoneNumber) return showToast('请输入手机号')
				if (!regex.phone.test(this.formData.phoneNumber)) return showToast('请输入正确的手机号')
				if (!this.formData.phoneCode) return showToast('请输入验证码')
				if (this.formData.phoneCode.length < 6) return showToast('请输入正确的验证码')
				uni.$util.showLoading()
				const res = await uni.$api.phoneCodeLogin(this.formData).finally(uni.finally)
				uni.setStorageSync('token', res.data.token)
				this.openerEvent('')
				await uni.$util.showSuccess('登录成功')
				this.navigateBack('/pages/index/index')

			},
			/**
			 * 密码登录
			 */
			async onSubmitPasswordLogin() {
				const showToast = uni.$util.showToast
				const regex = uni.$util.regex
				if (!this.agreement) return uni.$util.showToast('请阅读并同意用户协议和隐私政策')
				if (!this.formData.phoneNumber) return showToast('请输入手机号')
				if (!regex.phone.test(this.formData.phoneNumber)) return showToast('请输入正确的手机号')
				if (!this.formData.password) return showToast('请输入密码')
				if (this.formData.password.length < 6) return showToast('密码不能小于6位')
				uni.$util.showLoading()
				const res = await uni.$api.phonePasswordLogin(this.formData).finally(uni.finally)
				uni.setStorageSync('token', res.data.token)
				this.openerEvent('')
				await uni.$util.showSuccess('登录成功')
				this.navigateBack('/pages/index/index')
			},
			/**
			 * 获取验证码
			 */
			async getCode() {
				const showToast = uni.$util.showToast
				const regex = uni.$util.regex
				if (this.codeTime != 60 || this.timer) return
				if (!this.agreement) return showToast('请阅读并同意用户协议和隐私政策')
				if (!this.formData.phoneNumber) return showToast('请输入手机号')
				if (!regex.phone.test(this.formData.phoneNumber)) return showToast('请输入正确的手机号')
				uni.$util.showLoading()
				const res = await uni.$api.sendCode({
					phoneNumber: this.formData.phoneNumber,
					sendType: '2'
				}).finally(uni.finally)
				this.timer = setInterval(() => {
					this.codeTime--
					if (this.codeTime === 0) {
						this.codeTime = 60
						this.clearIntervalTimer()
					}
				}, 1000)
				uni.$util.showToast('已发送验证码, 请注意查收')
			},
			/**
			 * 取消定时器
			 */
			clearIntervalTimer() {
				clearInterval(this.timer)
				this.timer = null
			},
		}
	}
</script>
<style>
	page {
		background: #F1F4F3 !important;
	}
</style>
<style scoped lang="scss">
	.nav-back-view {
		@extend .column;

		.nav-back-icon {
			width: 43upx;
			height: 43upx;
		}
	}

	.nav-right-view {
		font-weight: 400;
		font-size: 29rpx;
		color: #282726;
	}

	.login-logo {
		width: 100%;
		@extend .row;
		padding-top: 69upx;
		margin-bottom: 89upx;

		.logo-image {
			width: 471upx;
			height: 181upx;
		}
	}

	.form-view {
		width: 681rpx;
		margin: 0 auto;
		background: #FFFFFF;
		border-radius: 14rpx;
		padding: 0 22upx;

		.form-item {
			width: 100%;
			@extend .row-between;
			padding: 22upx 0;

			.form-label {
				@extend .row;
				font-size: 29rpx;
				font-weight: 400;
				color: #282726;

				.label-text {
					width: 86upx;
					@extend .row-between;
				}
			}

			.required {
				&::after {
					content: "*";
					color: #FF442F;
					margin-left: 12upx;
				}
			}

			.form-content {
				width: calc(100% - 139upx);
				@extend .row-between;

				.input-css {
					flex: 1;
					font-size: 29rpx;
					font-weight: 400;
				}

				.plac-css {
					font-size: 29rpx;
					font-weight: 400;
					color: #AFB3BF;
				}

				.code-button {
					width: 187rpx;
					height: 67rpx;
					border-radius: 7rpx;
					border: 1rpx solid #FF2615;
					font-size: 25rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					color: #FF2615;
					@extend .column;
				}
			}
		}

		.form-item+.form-item {
			border-top: 1px solid #E9E9F4;
		}
	}

	.desc-text {
		margin: 18upx 0;
		font-size: 25rpx;
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		color: #FF2615;
		margin-right: 51upx;
	}

	.button-view {
		width: 681rpx;
		height: 91rpx;
		@extend .column;
		margin: 0 auto;
		background: linear-gradient(180deg, #FF7065 0%, #FF2615 100%);
		box-shadow: 0rpx 4 7rpx 0rpx rgba(255, 38, 21, 0.1);
		border-radius: 49rpx;
		font-size: 29rpx;
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		color: #FFFFFF;
		margin-top: 36upx;

		.button-desc {
			font-size: 22rpx;
			color: rgba($color: #FFFFFF, $alpha: 0.5);
			margin-top: 5upx;
		}
	}

	.button-switch {
		margin: 0 auto;
		font-size: 29rpx;
		font-weight: 400;
		color: #FF2615;
		margin-top: 43upx;
	}

	.nav-back {
		margin: 0 auto;
		font-size: 29rpx;
		font-weight: 400;
		color: #AFB3BF;
		margin-top: 43upx;
	}

	.agreement-view {
		width: 100%;
		@extend .row;
		position: fixed;
		left: 0;
		bottom: 83upx;

		.agreement-content {
			@extend .row;
			font-size: 22rpx;
			font-weight: 400;
			color: #AFB3BF;

			.select-icon {
				width: 31upx;
				height: 31upx;
				margin-right: 11upx;
			}


			.agreement-text {
				color: #FF2615;
			}
		}
	}


	.pc-view {
		width: 100%;
		@extend .column;
		align-items: flex-end;
		background: wheat;
		background: url('@/static/pc/login-bg.png');
		background-size: cover;
		position: relative;

		.pc-view-content {
			width: 100%;
			position: absolute;
			left: 0;
			top: 0;
			z-index: 1;

			.login-bg {
				width: 100%;
				min-height: 997px;
				height: calc(100vh - 208px);
				vertical-align: sub;
			}
		}
	}

	@media only screen and (max-width: 908px) {
		.pc-view {
			align-items: center;
		}
	}
</style>